<template>
  <div class="body">
    <app-top></app-top>

    <div class="wai">
      <h3>订单列表</h3>

      <div class="status">
        <span
          :class="searchForm.selectStatus == 2 ? 'selected' : ''"
          @click="getOrderList(2)"
          >全部订单</span
        >

        <span
          :class="searchForm.selectStatus == 0 ? 'selected' : ''"
          @click="getOrderList(0)"
          >待支付</span
        >

        <span
          :class="searchForm.selectStatus == 1 ? 'selected' : ''"
          @click="getOrderList(1)"
          >已支付</span
        >
      </div>

      <div class="orderInfo" v-for="order in orderList" :key="order.id">
        <p>用户名称:{{ user.username }}</p>

        <p>订单号:{{ order.id }}</p>

        <p>
          订单金额: <span class="price">¥{{ order.money }}</span>
        </p>

        <p class="pay" v-if="order.orderStatus == 0">
          支付状态:
          <font color="red" v-if="order.orderStatus == 0">未支付</font>
          <a href="javascript:;" @click="delOrderById(order.id)">删除订单</a>
          <a href="javascript:;" @click="toPay(order)">在线支付</a>
        </p>

        <p class="pay" v-if="order.orderStatus == 1">
          支付状态:
          <font color="blue" v-if="order.orderStatus == 1">已支付</font>
          <a href="javascript:;" @click="updateOrderById(order.id)">删除订单</a>
        </p>

        <p>收货地址:{{ order.receinfo }}</p>

        <p>下单时间: {{ order.createTime }}</p>

        <table align="center" width="95%">
          <tr>
            <th>缩略图</th>
            <th>商品名称</th>
            <th>商品种类</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>总价</th>
          </tr>

          <tr v-for="item in order.items" :key="item.id">
            <td>
              <a :href="'/detail/' + item.product.id">
                <img alt="xx" :src="item.product.prodImage" width="80" />
              </a>
            </td>
            <td>{{ item.product.prodName }}</td>
            <td>{{ item.product.typeName }}</td>
            <td>{{ item.product.price }}</td>
            <td>{{ item.buynum }}</td>
            <td>{{ item.buynum * item.product.price }}</td>
          </tr>
        </table>
      </div>

      <div class="fenye">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageNum"
          :page-size="searchForm.pageSize"
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      @close="closeDialog()"
      title="订单支付"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
      :center="true"
    >
      <div class="paying">
        <p>{{ payingOrder.id }}</p>
        <p>金额: ¥{{ payingOrder.money }}</p>
        <img class="payimg" width="240px" :src="payImgUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  orderListByUserId,
  wxpay,
  delOrder,
  updateOrder,
  getOrder,
} from "@/api/order.js";
import AppTop from "@/components/home/AppTop.vue";

export default {
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 5,
        selectStatus: 2,
      },

      orderList: [],

      user: null,

      total: 0,
      dialogVisible: false,
      payImgUrl: null,

      payingOrder: {},
      timer: null,
    };
  },

  created() {
    this.getList();
    this.user = JSON.parse(localStorage.getItem("shop_user"));
  },

  components: { AppTop },

  methods: {
    getList() {
      orderListByUserId(this.searchForm).then((resp) => {
        this.orderList = resp.data.records;
        this.total = resp.data.total;
      });
    },

    //页码改变触发
    handleCurrentChange(ye) {
      this.searchForm.pageNum = ye;
      this.getList();
    },

    getOrderList(i) {
      this.searchForm.selectStatus = i;
      this.getList();
    },

    //删除订单
    delOrderById(orderId) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delOrder(orderId).then((resp) => {
          if (resp.code == 2000) {
            this.$message("删除成功");
            this.getList();
          }
        });
      });
    },

    updateOrderById(orderId) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateOrder(orderId).then((resp) => {
          if (resp.code == 2000) {
            this.$message("删除成功");
            this.getList();
          }
        });
      });
    },

    //支付
    toPay(order) {
      this.payingOrder = order;
      this.dialogVisible = true;

      this.kaishi();

      wxpay(order.id).then((resp) => {
        if (resp.code == 2000) {
          this.payImgUrl = "data:image/jpg;base64," + resp.data;
        }
      });
    },

    closeDialog() {
      //alert("aaaaaaaaaa");
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    kaishi() {
      this.timer = setInterval(() => {
        //console.log("+++++++++++++++++++++++++++++++++++++++");

        getOrder(this.payingOrder.id).then((resp) => {
          if (resp.code == 2000) {
            //this.closeDialog();
            //消失dialog
            this.dialogVisible = false;
            //提示
            this.$message({
              message: "支付成功!",
              type: "success",
            });

            // 刷新
            this.getList();


          }
        });
      }, 1000);
    },
  },
};
</script>

<style scoped>
.paying {
  text-align: center;
}
.body {
  background: #eee;
}

h3 {
  background-color: white;
  padding: 15px;
  margin: 15px 0px;
  color: #666;
  font-weight: normal;
}
.status {
  background-color: white;
  padding: 10px;
  border-bottom: 1px #999 solid;
}
.status span {
  margin-right: 20px;
  padding-bottom: 7px;
  cursor: pointer;
}
.selected {
  border-bottom: 3px orangered solid;
  color: orangered;
}
.fenye {
  width: 1226px;
  margin: auto;
  text-align: center;
}

.wai {
  width: 1226px;
  margin: auto;
}

.orderInfo {
  background-color: white;
  padding: 15px;
}

.orderInfo p {
  line-height: 26px;
}
.orderInfo .pay a {
  margin-left: 15px;
}
.orderInfo p .price {
  color: red;
}

table {
  text-align: center;
}
table tr th {
  background-color: #eee;
  padding: 5px 0px;
}
table tr td {
  border-bottom: 1px #999 solid;
}
table tr td img {
  margin: 10px;
  border-radius: 6px;
  width: 80px;
}
</style>